<template>
  <div class="ChildPage TablePage">
    <vb-table :option="option" ref="table" @on-load="getList" @row-changed="onRowChanged">
      <template #headerSearch-append>
        <el-checkbox size="small" border v-model="showSystem" class="top_search_checkbox">包含系统路由</el-checkbox>
      </template>
      <template #table-name="scope">
        <el-tooltip content="系统路由" v-if="scope.row.isSystem">
          <b class="el-icon-setting prop-icon"></b>
        </el-tooltip>
        <el-tooltip content="默认首页" v-if="scope.row.isDefaultHome">
          <b class="el-icon-paperclip prop-icon"></b>
        </el-tooltip>
        {{scope.row.name}}
      </template>
    </vb-table>
  </div>
</template>

<script>
  export default {
    mixins: [],
    components: {
    },
    data() {
      return {
        showSystem: false,
        option: {
          "addBtn" : true,
          "hiddenHandleMenu" : false,
          "selection" : false,
          "index" : true,
          "fit" : true,
          "empty-text" : "暂无数据",
          "columnEmptyText" : "",
          "column" : [{
            "label" : "名称",
            "prop" : "name",
            "type" : "text",
            "tableShow" : true,
            "formShow" : true,
            "defaultSearch" : false,
            "defaultForm" : false,
            "showOverflowTooltip" : true,
            "fixed" : "",
            "sort" : 0,
            "align" : "left",
            "className" : null,
            "showProp" : null,
            "dicType" : null,
            "dicId" : "id",
            "dicLabel" : "label",
            "dicData" : [],
            "url" : null,
            "form" : {
              "type" : "text",
              "default" : null,
              "span" : 12,
              "multiple" : false,
              "spanClass" : null,
              "defaultIndex" : 0,
              "filterable" : false,
              "remote" : false,
              "remoteMethod" : null,
              "dateType" : "date",
              "valueFormat" : "YYYY-MM-DD",
              "appendLabel" : null,
              "prependLabel" : null,
              "rules" : [{
                "required" : true,
                "trigger" : "click"
              }],
              "remoteMethodKey" : null,
              "remoteMethodDataKey" : null,
              "remoteMethodParams" : []
            },
            "search" : {
              "show" : true,
              "label" : null,
              "prop" : "searchKey",
              "hiddenLabel" : true,
              "placeholder" : "名称/路径/备注",
              "width" : null
            }
          }, {
            "label" : "路径",
            "prop" : "path",
            "type" : "text",
            "tableShow" : true,
            "formShow" : true,
            "defaultSearch" : false,
            "defaultForm" : false,
            "showOverflowTooltip" : true,
            "fixed" : "",
            "sort" : 0,
            "align" : "left",
            "className" : null,
            "showProp" : null,
            "dicType" : null,
            "dicId" : "id",
            "dicLabel" : "label",
            "dicData" : [],
            "url" : null,
            "form" : {
              "type" : "text",
              "default" : null,
              "span" : 12,
              "multiple" : false,
              "spanClass" : null,
              "defaultIndex" : 0,
              "filterable" : false,
              "remote" : false,
              "remoteMethod" : null,
              "dateType" : "date",
              "valueFormat" : "YYYY-MM-DD",
              "appendLabel" : null,
              "prependLabel" : null,
              "rules" : [{
                "required" : true,
                "trigger" : "click"
              }],
              "remoteMethodKey" : null,
              "remoteMethodDataKey" : null,
              "remoteMethodParams" : []
            },
            "search" : {
              "show" : false,
              "label" : null,
              "prop" : null,
              "hiddenLabel" : false,
              "placeholder" : null,
              "width" : null
            }
          }, {
            "label" : "页面",
            "prop" : "pageId",
            "type" : "select",
            "tableShow" : true,
            "formShow" : true,
            "defaultSearch" : false,
            "defaultForm" : false,
            "showOverflowTooltip" : true,
            "fixed" : "left",
            "sort" : 0,
            "align" : "center",
            "className" : null,
            "showProp" : null,
            "dicType" : "api",
            "dicId" : "id",
            "dicLabel" : "name",
            "dicData" : [],
            "url" : null,
            "form" : {
              "type" : "text",
              "default" : null,
              "span" : 12,
              "multiple" : false,
              "spanClass" : null,
              "defaultIndex" : 0,
              "filterable" : false,
              "remote" : false,
              "remoteMethod" : null,
              "dateType" : "date",
              "valueFormat" : "YYYY-MM-DD",
              "appendLabel" : null,
              "prependLabel" : null,
              "rules" : [{
                "required" : true,
                "trigger" : "click"
              }],
              "remoteMethodKey" : "getPageList",
              "remoteMethodDataKey" : "data",
              "remoteMethodParams" : [{
                "name" : "isAll",
                "value" : "true"
              }]
            },
            "search" : {
              "show" : false,
              "label" : null,
              "prop" : null,
              "hiddenLabel" : false,
              "placeholder" : null,
              "width" : null
            }
          }, {
            "label" : "排序",
            "prop" : "sort",
            "type" : "inputNumber",
            "tableShow" : true,
            "formShow" : true,
            "defaultSearch" : false,
            "defaultForm" : false,
            "showOverflowTooltip" : true,
            "fixed" : "",
            "sort" : 0,
            "align" : "center",
            "className" : null,
            "showProp" : null,
            "dicType" : null,
            "dicId" : "id",
            "dicLabel" : "label",
            "dicData" : [],
            "url" : null,
            "form" : {
              "type" : "text",
              "default" : "1",
              "span" : 12,
              "multiple" : false,
              "spanClass" : null,
              "defaultIndex" : 0,
              "filterable" : false,
              "remote" : false,
              "remoteMethod" : null,
              "dateType" : "date",
              "valueFormat" : "YYYY-MM-DD",
              "appendLabel" : null,
              "prependLabel" : null,
              "rules" : [{
                "required" : false,
                "trigger" : "click"
              }],
              "remoteMethodKey" : null,
              "remoteMethodDataKey" : null,
              "remoteMethodParams" : []
            },
            "search" : {
              "show" : false,
              "label" : null,
              "prop" : null,
              "hiddenLabel" : false,
              "placeholder" : null,
              "width" : null
            }
          },
          {
            "label" : "默认首页",
            "prop" : "isDefaultHome",
            "type" : "switch",
            "tableShow" : false,
            "formShow" : true,
            "defaultSearch" : false,
            "defaultForm" : false,
            "showOverflowTooltip" : true,
            "fixed" : "",
            "sort" : 0,
            "align" : "center",
            "className" : null,
            "showProp" : null,
            "dicType" : null,
            "dicId" : "id",
            "dicLabel" : "label",
            "dicData" : [],
            "url" : null,
            "form" : {
              "type" : "text",
              "default" : false,
              "span" : 12,
              "multiple" : false,
              "spanClass" : null,
              "defaultIndex" : 0,
              "filterable" : false,
              "remote" : false,
              "remoteMethod" : null,
              "dateType" : "date",
              "valueFormat" : "YYYY-MM-DD",
              "appendLabel" : null,
              "prependLabel" : null,
              "rules" : [{
                "required" : false,
                "trigger" : "click"
              }],
              "remoteMethodKey" : null,
              "remoteMethodDataKey" : null,
              "remoteMethodParams" : []
            },
            "search" : {
              "show" : false,
              "label" : null,
              "prop" : null,
              "hiddenLabel" : false,
              "placeholder" : null,
              "width" : null
            },
            "effectTrueLabel" : "默认首页",
            "effectFalseLabel" : "-"
          },
          {
            "label" : "启用",
            "prop" : "effect",
            "type" : "switch",
            "tableShow" : true,
            "formShow" : true,
            "defaultSearch" : false,
            "defaultForm" : false,
            "showOverflowTooltip" : true,
            "fixed" : "",
            "sort" : 0,
            "align" : "center",
            "className" : null,
            "showProp" : null,
            "dicType" : null,
            "dicId" : "id",
            "dicLabel" : "label",
            "dicData" : [],
            "url" : null,
            "form" : {
              "type" : "text",
              "default" : true,
              "span" : 12,
              "multiple" : false,
              "spanClass" : null,
              "defaultIndex" : 0,
              "filterable" : false,
              "remote" : false,
              "remoteMethod" : null,
              "dateType" : "date",
              "valueFormat" : "YYYY-MM-DD",
              "appendLabel" : null,
              "prependLabel" : null,
              "rules" : [{
                "required" : false,
                "trigger" : "click"
              }],
              "remoteMethodKey" : null,
              "remoteMethodDataKey" : null,
              "remoteMethodParams" : []
            },
            "search" : {
              "show" : false,
              "label" : null,
              "prop" : null,
              "hiddenLabel" : false,
              "placeholder" : null,
              "width" : null
            }
          },
          {
            "label" : "备注",
            "prop" : "remark",
            "type" : "textarea",
            "tableShow" : true,
            "formShow" : true,
            "defaultSearch" : false,
            "defaultForm" : false,
            "showOverflowTooltip" : true,
            "fixed" : "",
            "sort" : 0,
            "align" : "left",
            "className" : null,
            "showProp" : null,
            "dicType" : null,
            "dicId" : "id",
            "dicLabel" : "label",
            "dicData" : [],
            "url" : null,
            "form" : {
              "type" : "text",
              "default" : null,
              "span" : 24,
              "multiple" : false,
              "spanClass" : null,
              "defaultIndex" : 0,
              "filterable" : false,
              "remote" : false,
              "remoteMethod" : null,
              "dateType" : "date",
              "valueFormat" : "YYYY-MM-DD",
              "appendLabel" : null,
              "prependLabel" : null,
              "rules" : [{
                "required" : false,
                "trigger" : "click"
              }],
              "remoteMethodKey" : null,
              "remoteMethodDataKey" : null,
              "remoteMethodParams" : []
            },
            "search" : {
              "show" : false,
              "label" : null,
              "prop" : null,
              "hiddenLabel" : false,
              "placeholder" : null,
              "width" : null
            }
          }],
          "border" : false,
          "stripe" : false,
          "status" : {
            "show" : false,
            "list" : []
          },
          "form" : {
            "size" : "small",
            "width" : 800,
            "closeOnClickModel" : false,
            "closeOnPressEscape" : false,
            "labelWidth" : "80"
          },
          "import" : {
            "show" : false,
            "tempFilePath" : null
          },
          "export" : {
            "show" : false
          },
          "handleColumnFixed" : "right",
          "page" : {
            "show" : true
          },
          "api" : {
            "search" : {
              "key" : "getRouterList",
              "dataKey" : "data",
              "totalKey" : "total"
            },
            "delete" : {
              "key" : "deleteRouter",
              "dataKey" : "ids"
            },
            "update" : {
              "key" : "updateRouter"
            },
            "add" : {
              "key" : "addRouter"
            },
            "detail" : {
              "key" : null,
              "open" : false,
              "dataKey" : "data",
              "idKey" : "id"
            }
          },
          "handleBtnList" : [{
            "key" : "edit",
            "label" : "编辑",
            "show" : true,
            "color" : null,
            vIf: function (item) {
              return !item.isSystem
            }
          }, {
            "key" : "delete",
            "label" : "删除",
            "show" : true,
            "color" : null,
            vIf: function (item) {
              return !item.isSystem
            }
          }]
        }
      }
    },
    computed: {},
    mounted() {
    },
    methods: {
      /**
       * 查询数据列表信息
       * @param page
       * @param size
       * @param search 检索条件
       * @param done
       */
      getList(page, size, search, done) {
        this.callApi("getRouterList", Object.assign({
          pageIndex: page,
          pageSize: size,
          showSystem: this.showSystem
        }, search)).then(res => {
          done(res)
        })
      },

      onRowChanged(row) {
        if (row.isDefaultHome) {
          this.$store.commit("setDefaultRoutePath", row.path);
        }
      }
    },
    watch: {

    }
  }
</script>

<style lang="scss" scoped>
  .top_search_checkbox {
    margin-right: 10px;
  }
  .prop-icon {
    margin-right: 1px;
    font-weight: bold;
    color: var(--primary)
  }
</style>
